<template>
    <div class="login-div">
       
        <div class="login-form">
            <el-card class="login-card">
            <h2 class="login-title">oa办公系统</h2>
            <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="60px">
                <el-form-item prop="userName" label="账号" class="aaa">
                  <el-input v-model="loginForm.userName"  placeholder="请输入账号"></el-input>
                </el-form-item>

                <el-form-item class="aaa" prop="password" label="密码">
                  <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button class="btn" type="primary" @click="userLogin">登录</el-button>
                  <el-button class="btn" type="primary">注册</el-button>
                </el-form-item>
            </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import {setToken} from '@/util/auth'

export default {
    data(){
        return{
            //登录信息
            loginForm:{
                userName:"",
                password:"",
            },
            rules: {
                userName: [
                  { required: true, message: '请输入用户名!', trigger: 'blur' }
                ],
                password: [
                  { required: true, message: '请输入密码!', trigger: 'blur' }
                ]
              }
            }
        },
    methods:{
        //登录页面
        userLogin(){
            //登录请求头设置
            var headers ={
                isToken:false,
            }

            axios.post("/api/user/login",this.loginForm,{headers}).then(res=>{
                //判断状态码
                //状态码为200,登陆成功   js跳转路由 -->首页
                if(res.data.code ==200){
                    //将token信息存入
                    // sessionStorage.setItem("realName",res.data.data.realName)
                    // setToken(res.data.data.token);
                    setToken(res.data.data.token);
                    this.$router.push("/").catch(()=>{});
                }else{
                    this.$message({
                        message:res.data.message,
                        type:"error"
                    })
                }
            })
        }
    }
    
}
</script>

<style scoped>
.login-title{
    text-align: center;
    margin-bottom: 20px;
}
.login-div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('../assets/444.png');
    background-size: cover;
}
.login-form{
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.btn{
    margin-left: 50px;
}
.login-card { 
    width: 450px;
}

</style>